<template>
	<div class="beiz">
		<mt-header title="订单备注" id='top'>
			<router-link to="/jiesuan" slot="left">
				<mt-button icon="back"></mt-button>
			</router-link>
			<!-- <mt-button icon="more" slot="right"></mt-button> -->
		</mt-header>
		<p>口味备注</p>
		<div>
			<button @click='yans' :class="Style?'active':''">全糖</button>
			<button @click='yans1' :class="Style1?'active':''">半糖</button>
			<button @click='yans2' :class="Style2?'active':''">少糖</button>
		</div>
		<!-- <input type="text" name="content"> -->
		<p><textarea name="content" placeholder="口味、偏好等要求..." class="lyb"></textarea></p>
		
		<!-- <button class="wc" >完成</button> -->
		<mt-button type="primary" @click='Toast'>完成</mt-button>
		<div></div>
		
	</div>
</template>

<script>
	import { Toast } from 'mint-ui';
	export default{
		methods:{
			yans(){
				this.Style = !this.Style
			},
			yans1(){
				this.Style1 = !this.Style1
			},
			yans2(){
				this.Style2 = !this.Style2
			},
			Toast(){
				this.$router.push('/')
				Toast({
				  message: '操作成功',
				  // iconClass: 'icon icon-success'
				  
				});
			}
			
		},
		data() {
			return{
				Style:false,
				Style1:false,
				Style2:false,
			}
		}
	}
</script>

<style lang="less" scoped>
	.mint-header{
		background-color: rgba(248, 248, 248, 100);
		color: #000000;
	}
	.beiz{
		p{
			text-align: left;
			font-size: 12px;
		}
		div{
			button{
				background: #fff;
				margin-left: 15px;
				// border: 1 solid #000;
				border:none;
			}
		.active{
			background-color: red;
			color: #fff;
		}
		}
		.lyb{
			width: 70%;
			height: 100px;
			resize: none;
			margin-left: 15%;
		}
		
	}
	.mint-button{
		width: 70%;
		background: #FF3B00 80%;
		border:none;
		color: #fff;
	}
</style>
